import React from "react";
import { Row, Col, Menu, Icon,Button,Modal,Tabs,Input,Form ,message  } from 'antd';
//路由
import {Link} from "react-router";

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
import "../../css/pcCss/pcheader.less";
import {post} from "../utils/http.js";


class PcHeader extends React.Component{
    constructor(){
        super();
        this.state={
            current:"index",
            showhide:true,
            vistvle:false,
            loginreg:"login",
            name:"",
            newpassword:false
        }
    }
 
    componentDidMount(){
        var loca=localStorage.getItem("username");
        if(loca){
            this.setState({
                name:loca,
                showhide:false
            })
        }   
    }
    reg(){
        this.setState({
            showhide:true
        })
        localStorage.removeItem("username")
    }
     
    changeMenuSelect(event){
        if(event.key=="login"){
            this.showhide(true)
        }
        this.setState({
            current:event.key
        })
    }
   
    showhide(flag){
        this.setState({
            vistvle:flag
        })
    }
    showModal  ()  {
        this.setState({
            newpassword: true,
        });
      }
      handleOk (e) {
        this.setState({
            newpassword: false,
        });
      }
      handleCancel (e){
       
        this.setState({
            newpassword: false,
        });
      }
    callback(key) {
        console.log(key);
       if(key=="1"){
               this.setState({
                   loginreg:"login"
               })
        }else if(key=="2"){
            this.setState({
                loginreg:"reg"
            })
        }

      }
      handleSubmitold(event){
        event.preventDefault();
        let info=this.props.form.getFieldsValue();
        console.log(info);
        let result=post("http://localhost:3000/update",{
            username:info.old_userName,
            password:info.new_password
        }).then(rel=>{
            return rel.json()
        }).then(json=>{
           this.setState({
               
               newpassword:false
           })
        })
      }
      handleSubmit(event){
        event.preventDefault();
        var loginreg=this.state.loginreg;
        let info=this.props.form.getFieldsValue();
        if(loginreg=="login"){
            //登录获取数据
            let resulr =post("http://localhost:3000/sel",{
                username:info.userName,
                password:info.password
            }).then(rel=>{
               return rel.json();
            }).then(json=>{
                console.log(json);
                if(json=="查询失败"){
                    this.setState({
                        
                        
                        vistvle:false,
                     })
                    return;
                }
                this.setState({
                   name:json[0].username,
                   showhide:false,
                   vistvle:false,
                })
                localStorage.setItem("username",json[0].username);

            })
        }else if(loginreg=="reg"){
            //注册插入数据
            let resulr =post("http://localhost:3000/add",{
                username:info.r_userName,
                password:info.r_password
            }).then(rel=>{
               return rel.json();
            }).then(json=>{
                message.info('注册成功请登录');
                this.setState({
                    vistvle:false
                })
            })
        }
      }
    render(){
        let {current}=this.state;
        let show =this.state.showhide
        ?
        <Menu.Item key="login" className="showhide">
        <Icon type="info-circle" />登录|注册
        </Menu.Item>
        :
        <Menu.Item key="info"  className="showhide">
        <Button type="primary"  onClick={this.showModal.bind(this)}>{this.state.name}</Button>
        <Button><Link to="/gerenzhongxin">个人中心</Link></Button>
        <Button type="dashed" onClick={this.reg.bind(this)}>退出</Button>
        </Menu.Item>

        const { getFieldDecorator} = this.props.form;
        return(
            <div>
                <Row>
                    <Col span={2}></Col>
                    <Col span={20}>
                        <Menu
                        onClick={this.changeMenuSelect.bind(this)} 
                        mode="horizontal"
                        selectedKeys={[current]}
                        >
                            <Menu.Item key="index">
                            <Link to="/">
                                <Icon type="info-circle" />首页
                            </Link>
                                
                            </Menu.Item>
                            <Menu.Item key="baijiahao">
                            <Link to="/baijiahao">
                            <Icon type="info-circle" />百家号
                            </Link>
                                
                            </Menu.Item>
                            <Menu.Item key="guonei">
                            <Link to="/guonei">
                            <Icon type="info-circle" />国内
                            </Link>
                                
                            </Menu.Item>
                            <Menu.Item key="guoji">
                            <Link to="/guoji">
                                <Icon type="info-circle" />国际
                            </Link>
                                
                            </Menu.Item>
                            <Menu.Item key="junshi">
                            <Link to="/junshi">
                                <Icon type="info-circle" />军事
                            </Link>
                                
                            </Menu.Item>
                            <Menu.Item key="shehui">
                            <Link to="/shehui">
                                <Icon type="info-circle" />社会
                            </Link>
                                
                            </Menu.Item>
                            {show}   
                        </Menu>

                        <Modal
                        title="修改密码"
                        visible={this.state.newpassword}
                        onOk={this.handleOk.bind(this)}
                        onCancel={this.handleCancel.bind(this)}
                      >
                      <Form onSubmit={this.handleSubmitold.bind(this)}>
                      <FormItem>
                          {getFieldDecorator('old_userName', {
                              rules: [{ required: true, message: 'Please input your username!' }],
                          })(
                              <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />}  placeholder="Username" />
                          )}
                      </FormItem>
                      <FormItem>
                          {getFieldDecorator('old_password', {
                              rules: [{ required: true, message: 'Please input your Password!' }],
                          })(
                              <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
                          )}
                      </FormItem>
                     
                        <FormItem>
                            {getFieldDecorator('new_password', {
                                rules: [{ required: true, message: 'Please input your Password!' }],
                            })(
                                <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
                            )}
                        </FormItem>
                        <Button  type="primary"  htmlType="submit">修改密码</Button> 
                  </Form> 
                      </Modal>

                        <Modal 
                        visible={this.state.vistvle}
                        onOk={()=>this.showhide(false)}
                        onCancel={()=>this.showhide(false)}
                        >
                            <Tabs defaultActiveKey="1" onChange={this.callback.bind(this)}>
                                <TabPane tab="登录" key="1" >
                                    <Form onSubmit={this.handleSubmit.bind(this)}>
                                        <FormItem>
                                            {getFieldDecorator('userName', {
                                                rules: [{ required: true, message: 'Please input your username!' }],
                                            })(
                                                <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
                                            )}
                                        </FormItem>
                                        <FormItem>
                                            {getFieldDecorator('password', {
                                                rules: [{ required: true, message: 'Please input your Password!' }],
                                            })(
                                                <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
                                            )}
                                        </FormItem>
                                        <Button  type="primary" htmlType="submit">登录</Button>      
                                    </Form>  
                                </TabPane>
                                <TabPane tab="注册" key="2">
                                    <Form onSubmit={this.handleSubmit.bind(this)}>
                                        <FormItem>
                                            {getFieldDecorator('r_userName', {
                                                rules: [{ required: true, message: 'Please input your username!' }],
                                            })(
                                                <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
                                            )}
                                        </FormItem>
                                        <FormItem>
                                            {getFieldDecorator('r_password', {
                                                rules: [{ required: true, message: 'Please input your Password!' }],
                                            })(
                                                <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
                                            )}
                                        </FormItem>
                                        
                                        <Button  type="primary"  htmlType="submit">注册</Button>                           
                                    </Form>
                                </TabPane>
                            </Tabs>
                        </Modal>
                    </Col>
                    <Col span={2}></Col>
                </Row>

            </div>
        )
    }
}
export default PcHeader=Form.create()(PcHeader);